@use "../../colors";
@use "../../frameless";

.checkbox-container {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
    color: colors.$header-gray;
    font-size: 0.75rem;
    font-style: normal;
    line-height: 1rem;

    input {
        &[type=checkbox] {
            cursor: pointer;
            appearance: none;
            border: 2px solid colors.$active-gray;
            border-radius: 4px;
            width: 1.25rem;
            height: 1.25rem;

            &:checked,
            &:focus {
                transition: all .25s ease;
            }

            &:checked {
                background-color: colors.$ui-blue;
                text-align: center;
                text-indent: .125rem;
                line-height: 1.1rem;

                &:after {
                    color: colors.$type-white;
                    content: "\2714";
                }
            }
        }
    }
}
